<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录首页</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}"/>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>红色教育网</h1>
        <h2>Login</h2>
    </header>
    <div class="content">
        <form id="login" method="post">
            用 户 名：
            <input type="text" name="u_name" id="username" placeholder="请输入用户名"><br>
            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码：
            <input type="password" name="u_pwd" id="password" placeholder="请输入密码"><br>
            <span id="warn"></span><br>
            <input type="button" id="u_login" value="登录"/>
            <input type="reset" id="u_reset" value="重置"/>
            <br>
            <a id="register" href="/toRegister">没有账号？注册</a>
        </form>
    </div>
</div>
<script type="text/javascript" language="JavaScript">
    $(function () {
        // 给整个浏览器窗口添加键盘按下事件
        $(window).keydown(function (event) {
            // 如果按的是回车键，则提交登录请求
            if (event.keyCode == 13) {
                $("#u_login").click();
            }
        })
        // 判断输入框是否为空
        $('#u_login').click(function () {
            let username = $("#username");
            let password = $("#password");
            if (username.val() == "") {
                alert("用户名不能为空!");
                username.focus();
                return false;
            }
            if (password.val() == "") {
                alert("密码不能为空!");
                password.focus();
                return false;
            }
            // 账号密码不为空，去后台检查账号密码是否正确
            $.post({
                type: "POST",
                url: "/login",
                data: {
                    'username': username.val(),
                    'password': password.val()
                },
                success: function (data) {
                    if (data == 'ok') {
                        window.location.href = "/welcome";
                    } else {
                        $('#warn').html('账号或者密码有误');
                    }
                }
            });
        });
    });
</script>
</body>
</html>
